<script lang="ts" setup>
import * as echarts from "echarts";
import { listStatisticsByType } from "@/api/monitor/operlog";


const chartData = ref();
const chart = ref();
const total = ref(0);
const loading = ref(true);
let myChart: any;
const getList = async () => {
  total.value = 0;
  if (myChart) {
    myChart.dispose(); // 销毁当前的图表实例
  }
  loading.value = true;
  const res = await listStatisticsByType(null);
  res.data.forEach(item => {
    total.value += item.count;
  });
  chartData.value = res.data;
  loading.value = false;
  let add = chartData.value.filter(item => item.type === "1").map((item) => item.count)[0];
  let update = chartData.value.filter(item => item.type === "2").map((item) => item.count)[0];
  let del = chartData.value.filter(item => item.type === "3").map((item) => item.count)[0];
  let auth = chartData.value.filter(item => item.type === "4").map((item) => item.count)[0];
  let export_ = chartData.value.filter(item => item.type === "5").map((item) => item.count)[0];
  let import_ = chartData.value.filter(item => item.type === "6").map((item) => item.count)[0];
  let withdrawal = chartData.value.filter(item => item.type === "7").map((item) => item.count)[0];
  let gen = chartData.value.filter(item => item.type === "8").map((item) => item.count)[0];
  let empty = chartData.value.filter(item => item.type === "9").map((item) => item.count)[0];

  /*最大数值*/
  let max = Math.max(add, update, del, import_, withdrawal);

  let infoEl = chart.value;
  myChart = echarts.init(infoEl);
  type EChartsOption = echarts.EChartsOption;
  let option: EChartsOption;

  let icon =
    "";

  let operationData = chartData.value.map((item) => item.count);
  console.log(chartData.value);
  console.log(operationData);
  let totalList = new Array(chartData.value.length).fill(total.value);
  console.log(totalList);
  let colors = [
    ["#80FFA5", "rgba(128,255,165,0.39)"],
    ["#389af4", "#dfeaff"],
    ["#ff7070", "rgba(255,69,69,0.3)"],
    ["#ffc257", "#ffedcc"],
    ["#ff8c37", "#ffdcc3"],
    ["#fd6f97", "#fed4e0"],
    ["#a181fc", "#e3d9fe"],
    ["#7ac8ff", "rgba(122,200,255,0.47)"],
    ["#ff0000", "rgba(255,0,0,0.47)"]
  ];
  option = {
    backgroundColor: "#fff",
    title: [],
    grid: [
      {
        left: "5%",
        top: "5%",
        bottom: "35%",
        right: "5%"
      },
      {
        left: "5%",
        top: "15%",
        bottom: "35%",
        right: "5%"
      }
    ],
    legend: {
      show: true,
      data: ["新增", "修改", "删除", "授权", "导出", "导入", "强退", "生成代码", "清空数据"],
      align: "left",
      right: 0,
      textStyle: {
        color: "#434e79",
        fontSize: 14,
        fontWeight: 400
      },
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 35
    },
    tooltip: {
      show: false,
      trigger: "axis",
      padding: [8, 10],
      textStyle: {
        color: "#fff"
      },
      backgroundColor: "rgba(0,0,0,0.5)",
      axisPointer: {
        type: "none"
      }
    },
    xAxis: [
      {
        type: "category",
        gridIndex: 0,
        data: ["新增", "修改", "删除", "授权", "导出", "导入", "强退", "生成代码", "清空数据"],
        axisLine: {
          lineStyle: {
            color: "#E0E2E5"
          }
        },
        axisTick: {
          show: true
        },
        axisLabel: {
          show: true,
          color: "#434e79",
          fontSize: 16,
          fontWeight: 400
        }
      },
      {
        type: "category",
        gridIndex: 1,
        data: ["新增", "修改", "删除", "授权", "导出", "导入", "强退", "生成代码", "清空数据"],

        axisLine: {
          lineStyle: {
            color: "#E0E2E5"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,

          color: "#434e79",
          fontSize: 16,
          fontWeight: 400

        }
      }
    ],
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        position: "top",
        show: true,
        // interval: 50,
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#E0E2E5"
          }
        }
      },
      {
        type: "value",
        gridIndex: 1,
        // position: [20, 0, 0, 0],
        offset: 0,
        show: true,
        // max: 200,
        // interval: 50,
        axisLine: {
          show: false
        },
        axisLabel: {
          // padding: [20, 0, 0, 0],
          verticalAlign: "top"
          // backgroundColor:'red',
          // formatter: function(value, index) {
          //   if (value === 0) {
          //     value = "";
          //     return value;
          //   } else {
          //     return value;
          //   }
          // }
        },
        splitLine: {
          lineStyle: {
            color: "#E0E2E5"
          }
        }
      }
    ],
    series: [
      {
        name: "总计",
        type: "bar",
        silent: true,
        barMaxWidth: 20,
        xAxisIndex: 0,
        yAxisIndex: 0,
        symbol: "none",
        z: 0,
        itemStyle: {
          color: "rgba(255,0,0,0)"
        },

        data: totalList,
        markLine: {
          symbol: ["none", "none"],
          symbolSize: 15,
          lineStyle: {
            color: "#E0E2E5"
          },
          label: {
            show: false
          },
          data: [
            {
              xAxis: "新增"
            },
            {
              xAxis: "修改"
            },
            {
              xAxis: "删除"
            },
            {
              xAxis: "授权"
            },
            {
              xAxis: "导出"
            },
            {
              xAxis: "导入"
            },
            {
              xAxis: "强退"
            },
            {
              xAxis: "生成代码"
            },
            {
              xAxis: "清空数据"
            }
          ]
        },
        markPoint: {
          symbol: "circle",
          symbolSize: 15,
          label: {
            show: false
          },
          data: [
            {
              yAxis: total.value,
              xAxis: "新增",
              itemStyle: {
                normal: {
                  color: colors[0][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "修改",
              itemStyle: {
                normal: {
                  color: colors[1][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "删除",
              itemStyle: {
                normal: {
                  color: colors[2][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "授权",
              itemStyle: {
                normal: {
                  color: colors[3][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "导出",
              itemStyle: {
                normal: {
                  color: colors[4][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "导入",
              itemStyle: {
                normal: {
                  color: colors[5][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "强退",
              itemStyle: {
                normal: {
                  color: colors[6][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "生成代码",
              itemStyle: {
                normal: {
                  color: colors[7][0]
                }
              }
            },
            {
              yAxis: total.value,
              xAxis: "清空数据",
              itemStyle: {
                normal: {
                  color: colors[8][0]
                }
              }
            }
          ]
        }
      },
      {
        name: "完成",
        type: "bar",
        xAxisIndex: 1,
        yAxisIndex: 1,
        silent: false,
        barMaxWidth: 20,
        z: 1,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 0, 0],
            color: (params) => {
              let colorList = [colors[0][1], colors[1][1], colors[2][1], colors[3][1], colors[4][1],
                colors[5][1], colors[6][1], colors[7][1], colors[8][1]];
              return colorList[params.dataIndex];
            },
            label: {
              show: true,
              position: "top",
              distance: 0,
              color: "#000",
              fontSize: 16,
              backgroundColor: {
                image: icon
              },
              padding: [10, 15, 20, 15]
            }
          }
        },
        data: operationData,
        emphasis: {
          itemStyle: {
            color: "#389af4"
          }
        }
      },
      {//折线
        data: operationData,
        type: "line",
        smooth: true,
        z: 0,
        name: "折线图",
        lineStyle: {
          color: "rgba(50,117,251,0.5)",
          width: 4,
          shadowColor: "rgba(0, 0, 0, 0.3)", //设置折线阴影
          shadowBlur: 5,
          shadowOffsetY: 20
        },
        areaStyle: { //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: "rgba(25,163,223,.3)"
          },
            {
              offset: 1,
              color: "rgba(25,163,223, 0)"
            }
          ], false),
          shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      },
      {//piek
        name: "新增",
        type: "pie",
        xAxisIndex: 2,
        yAxisIndex: 2,
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[0][0],
            shadowColor: colors[0][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["10%", "85%"],
        data: [
          {
            value: Math.floor(add / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[0][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - add) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[0][1]
              },
              emphasis: {
                color: colors[0][1]
              }
            }
          }
        ]
      },
      {
        name: "修改",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[1][0],
            shadowColor: colors[1][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["20%", "85%"],
        data: [
          {
            value: Math.floor(update / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[1][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - update) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[1][1]
              },
              emphasis: {
                color: colors[1][1]
              }
            }
          }
        ]
      },
      {
        name: "删除",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[2][0],
            shadowColor: colors[1][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["30%", "85%"],
        data: [
          {
            value: Math.floor(del / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[2][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - del) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              borderRadius: 7,
              normal: {
                color: colors[2][1]
              },
              emphasis: {
                color: colors[2][1]
              }
            }
          }
        ]
      },
      {
        name: "授权",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[3][0],
            shadowColor: colors[3][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["40%", "85%"],
        data: [
          {
            value: Math.floor(auth / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },

                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[3][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - auth) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[3][1]
              },
              emphasis: {
                color: colors[3][1]
              }
            }
          }
        ]
      },
      {
        name: "导出",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[4][0],
            shadowColor: colors[4][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["50%", "85%"],
        data: [
          {
            value: Math.floor(export_ / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[4][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - export_) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[4][1]
              },
              emphasis: {
                color: colors[4][1]
              }
            }
          }
        ]
      },
      {
        name: "导入",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[5][0],
            shadowColor: colors[5][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["60%", "85%"],
        data: [
          {
            value: Math.floor(import_ / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[5][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - import_) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[5][1]
              },
              emphasis: {
                color: colors[5][1]
              }
            }
          }
        ]
      },
      {
        name: "强退",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[6][0],
            shadowColor: colors[6][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["70%", "85%"],
        data: [
          {
            value: Math.floor(withdrawal / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[6][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - withdrawal) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[6][1]
              },
              emphasis: {
                color: colors[6][1]
              }
            }
          }
        ]
      },
      {
        name: "生成代码",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[7][0],
            shadowColor: colors[7][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["80%", "85%"],
        data: [
          {
            value: Math.floor(gen / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[7][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - gen) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[7][1]
              },
              emphasis: {
                color: colors[7][1]
              }
            }
          }
        ]
      },
      {
        name: "清空数据",
        type: "pie",
        clockWise: true,
        radius: [45, 55],
        itemStyle: {
          normal: {
            borderRadius: 7,
            color: colors[8][0],
            shadowColor: colors[8][1],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: true,
        center: ["90%", "85%"],
        data: [
          {
            value: Math.floor(empty / total.value * 10000) / 100,
            label: {
              normal: {
                formatter: function(params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                  color: colors[8][0]
                }
              }
            }
          },
          {
            value: Math.floor((total.value - empty) / total.value * 10000) / 100,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[8][1]
              },
              emphasis: {
                color: colors[8][1]
              }
            }
          }
        ]
      }
    ]
  };

  myChart.on("mouseover", (params) => {
    if (params.componentSubType === "bar" && params.seriesName != "总计") {
      console.log(option, params.dataIndex);
      let colorList = [colors[0][0], colors[1][0], colors[2][0], colors[3][0], colors[4][0],
        colors[5][0], colors[6][0], colors[7][0], colors[8][0]];
      var color = colorList[params.dataIndex];
      option.series[1].emphasis.itemStyle.color = color;
      var PIEindex = params.dataIndex + 3;
      option.series[PIEindex].radius = [55, 65];
      option.series[PIEindex].itemStyle.normal.color = colorList[params.dataIndex];
      myChart.setOption(option);
    }
  });

  myChart.on("mouseout", (params) => {
    if (params.componentSubType === "bar" && params.seriesName != "目标") {
      //  console.log(params);
      let colorList = [colors[0][0], colors[1][0], colors[2][0], colors[3][0], colors[4][0],
        colors[5][0], colors[6][0], colors[7][0], colors[8][0]];
      option.series[1].itemStyle.normal.label.show = false;
      var PIEindex = params.dataIndex + 3;
      option.series[PIEindex].radius = [45, 55];
      option.series[PIEindex].itemStyle.normal.color = colorList[params.dataIndex];
      myChart.setOption(option);
    }
  });
  myChart.resize(); // 调整图表大小
  option && myChart.setOption(option); // 设置图表选项
};
onMounted(async () => {
  await getList(); // 初始化时获取数据
});
defineExpose({ getList });
</script>

<template>
  <a-spin :spinning="loading" size="large">
    <div ref="chart" style="height:400px"></div>
  </a-spin>
</template>

<style lang="scss" scoped>

</style>
